<template>
	<view class="tabbar" :style="{ 'padding-bottom': paddingBottomHeight + 'rpx', 'background-color': backgroundColor, borderTop: '0.5rpx solid ' + borderStyle }">
		<view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.pagePath)">
			<image class="item-img" :src="item.selectedIconPath" v-if="current == index"></image>
			<image class="item-img" :src="item.iconPath" v-else></image>
			<!-- <view v-if="index == 1 && unreadTotalNum > 0" class="item-num">{{ unreadTotalNum }}</view> -->
			<view class="item-name" :style="{ color: color }" :class="{ tabbarActive: current == index }" v-if="item.text">{{ item.text }}</view>
		</view>
	</view>
</template> 

<script>

export default {
	props: {
		current: String | Number
	},

	data() {
		return {
			paddingBottomHeight: 41,
			color: '#8E8E93',
			selectedColor: '#0C77F6',
			borderStyle: '#F3F3F3',
			backgroundColor: '#FFFFFF',
			list: [
				{
					pagePath: 0,
					iconPath: '/static/icon_home_tab_oreder_selected@2x.png',
					selectedIconPath: '/static/icon_home_tab_oreder_selected_click@2x.png',
					text: '首页'
				},

				{
					pagePath: 1,
					iconPath: '/static/icon_home_tab_management_default@2x.png',
					selectedIconPath: '/static/icon_home_tab_management_default_click@2x.png',
					text: '报表'
				},
				{
					pagePath: 2,
					iconPath: '/static/icon_home_tab_set_default@2x.png',
					selectedIconPath: '/static/icon_home_tab_set_default_click@2x.png',
					text: '商家中心'
				},
			]
		};
	},
	created() {
		let that = this;
		uni.getSystemInfo({
			success: res => {
				let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
				model.forEach(item => {
					//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
					if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
						that.paddingBottomHeight = 40;
					}
				});
			}
		});
	},
	watch: {},
	methods: {
		tabbarChange(path) {
			this.$emit('onChange', path);
		}
	}
};
</script>

<style lang="less">
.tabbarActive {
	color: #6071b8 !important;
}
.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 100rpx;
	background-color: #ffffff;
	z-index: 9999;
	.tabbar-item {
		width: 33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		position: relative;
		.item-img {
			margin-bottom: 11rpx;
			width: 35rpx;
			height: 35rpx;
		}
		.item-name {
			font-size: 20rpx;
			color: #999999;
		}

		.item-num {
			width: 36rpx;
			height: 36rpx;
			background: #f25643;
			border-radius: 50%;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 6rpx;
			right: 80rpx;
		}
	}
}
</style>
